<template>
  <div
    style="margin-top: 15px;min-height: 100%;"
    class="main-div"
  >
    <Spin v-show="isSpinShow" fix size="large"/>
    <el-tabs tab-position="left"  style="padding-top: 20px;margin-bottom: 15px">
      <el-tab-pane label="">说明:如果当前的流程没有定义决策变量，则无需设置字段值。</el-tab-pane>
    </el-tabs>
    <div slot="title" style="margin-left: 35px;margin-bottom: 15px">
          <span>
            <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="simulation">
              <Icon type="ios-bug"/>测试
            </Button>
            <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="go" >
              <Icon type="md-close"/>关闭
            </Button>
          </span>


    </div>
    <Card style="margin-top: 5px;margin-bottom: 10px" v-if="ruleForm.tableData.length>0">
      <p slot="title">字段</p>
      <el-form
        :model="ruleForm"
        ref="ruleForm"

        style="margin-top: 10px">
        <el-table
          :data="ruleForm.tableData"
          border
        >
          <el-table-column label="必填字段" >

            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.key'">
                <el-input style="width:100%" v-model="scope.row.key"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="值"
          >
            <template slot-scope="scope">


              <el-form-item :prop="'tableData.' + scope.$index + '.val'" >
                <el-input style="width:100%" v-model="scope.row.val" clearable></el-input>

              </el-form-item>
            </template>
          </el-table-column>

        </el-table>

      </el-form>

    </Card>

    <Modal
      :mask-closable="false"
      v-model="flowImage.show"
      title="流程图"
      width="85%"
      :transfer="false"
      @on-cancel="close"
    >
      <iframe
        id="flowImageframe"
        width="100%"
        style="min-height: 600px"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        :src="flowImage.src"
      />
    </Modal>
  </div>

</template>

<script>
  import {loadWfModule, getStartBtn, renderStartForm, startDef, saveDraft,simulationBpm,simulationBpmResult,simulationBpmVar} from '@/api/loadwfmodule'
  import Footer from '../../../common/footer'

  export default {
    name: 'Task',
    components: {
      Footer
    },

    data() {
      return {
        ruleForm: {
          tableData: [],
        },
        tableData: [],
        jsonData: {},
        editData: {},
        remoteFuncs: {},
        singleUserData: {},
        dynamicData: {},
        sysTypeEntity: {},
        isSpinShow: true,
        taskBtns: [],
        modelKey: '',
        id: '',
        md5Result: '',
        tableHeight: 450,
        formData_e: null,
        formIndex: false,
        startForm: {
          defId: '',
          modelId: 0,
          typeTitle: '',
          formData: '',
          groupId: '',
          typeKey: '',
          defKey: ''
        },
        flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=false&table=false' + '&instId='
          }

      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop

      },
    created: function () {
      var query = this.$route.query
      if (query.id){
        this.id=query.id;
      }
      if (query.modelKey) {
        this.modelKey = query.modelKey
      } else {
        if (this.operateModelKey) {
          this.formIndex=true
          this.modelKey = this.operateModelKey
        }
      }
      this.startForm.defKey=  this.modelKey
      this.getData()

    },
    watch: {
      operateModelKey() {
        if (this.operateModelKey){
          this.modelKey = this.operateModelKey
          this.formIndex=true
          this.getData()
        } else{
          this.jsonData={}
          this.editData={}
          this.formIndex=false;
          this.modelKey=""
        }
        this.startForm.defKey=  this.modelKey


      },
      jsonData: {
        handler(newValue, oldValue) {
          if (newValue) {
            this.getFormData()
          }
        },
        deep: true
      }
    },
    props: {
      operateModelKey: {
        type: String,
        default: ""
      }
    },
    methods: {
      action: function (action) {
        if (typeof action === 'object') {
          this.alias = action.alias
        } else {
          this.alias = action
        }

        switch (this.alias) {
          case 'startFlow':// 启动
            this.startFlow()
            break
          case 'flowImage':
            this.flowImageAction()
            break
          case 'print':

            window.print()
            break
          case 'saveDraft':
            this.saveDraft()
            break
          default:
        }
      },
      flowImageAction: function () {
        this.flowImage.src = this.flowImage.base + this.startForm.modelId + '&t=' + new Date().getTime()
        this.flowImage.show = true
      },
      startFlow: function () {
        this.getFormData()
        const that = this
        if (this.$refs.generateForm) {
          this.$refs.generateForm.getData().then(data => {
            this.startForm.formData = JSON.stringify(data)
            this.formData_e = null

            startDef(that.startForm).then((response) => {
              if (response.code == 0) {
                that.go()
              }
            })


          }).catch(e => {
            this.$message({"duration":'800',message:'表单校验不通过',type:'warning',customClass:'zZindex'});

          })
        }


      },

      async simulation() {

        const that = this
        var obj = JSON.parse(JSON.stringify(this.ruleForm.tableData))
        obj["id"]=this.id
          simulationBpm(obj).then((response) => {

            if (response.code == 0) {
              var businessKey=response.businessKey;
              that.$confirm('模型校验通过, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
               this.simulationBpmResult(businessKey,0)
              }).catch(() => {
                //几点取消的提示
              });
            }else{
              this.$message({"duration":800,message:'模型预测失败，必填变量丢失',type:'warning',customClass:'zZindex'});

              return
            }
          })

      },
      simulationBpmResult:function(businessKey,count){
        count=count++;
        debugger
        simulationBpmResult(businessKey).then((response2) => {
          if (response2.code == 0) {
            var data2=response2.data;
            var processInstanceId=response2.processInstanceId;
            var md5=response2.md5;
            this.md5Result=md5;
            var url=this.flowImage.base+processInstanceId;
            this.flowImage.src=url;
            this.flowImage.show=true;
            this.isSpinShow=false;
          } else {
            this.$message({"duration":800,message:'模型预测失败，当前的模型不能正常运转',type:'warning',customClass:'zZindex'});


          }
        })
      },
      getFormData: function () {
        if (this.$refs.generateForm) {
          this.$refs.generateForm.getData().then(data => {
            this.startForm.formData = JSON.stringify(data)
            this.formData_e = null
            return data
          }).catch(e => {
            this.formData_e = e;
          })
        }

      },
      close:function(){

      },
      go: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)

      },
      start: function (item) {
        this.$router.push({name: 'handleHisTaskDetails', query: {t: new Date().getTime()}})
      },
      loadWfModule:function(){
        loadWfModule().then((response) => {
          this.tableData = response.data
        })
      },
      getData: function () {
        simulationBpmVar(this.id).then((response) => {
          var data=[];
          response.data.forEach((item,index,array)=>{
            //执行代码
            var d={};
            d['key']=item
            d['val']=''
            data.push({'key':item,"val":''})
          })
          this.ruleForm.tableData=data;
        })
        this.isSpinShow=false

      }

    }

  }

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    width: 311px;
    float: left;
    margin-left: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

  .container {
    height: auto !important;
    min-height: 1650px;
  }
  .zZindex {
    z-index:3000 !important;
  }
</style>
